<template>
  <div :class="{ 'slider-com': true, expand: menuStore.expandFold }">
    <!-- <el-menu :default-active="defaultActive" class="el-menu-demo" background-color="#3c4145" active-text-color="#fff" @select="handleSelect">
      <el-menu-item v-for="(item, index) in menu" :index="item.index" :key="item.index" :data-index="index">
        <component class="slide-icon" :is="item.icon"></component>
        <div class="slide-name">{{ item.name }}</div>
      </el-menu-item>
    </el-menu> -->
    <el-menu :default-active="indexAct" class="el-menu-slider" :collapse="menuStore.expandFold" @open="handleOpen"
      @close="handleClose">
      <template v-for="(item, index) in menus" :key="index">
        <el-sub-menu v-if="item.children.length" :index="item.index">
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="item2.index" v-for="(item2, index2) in item.children" :key="index2"
              @click="actMenuItem(item2)">{{ item2.name }} </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item v-if="!item.children.length" :index="item.index" @click="actMenuItem(item)">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useMenuStore } from '@/pinia/menu'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/pinia/user'

const menuStore = useMenuStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

let indexAct = computed(() => {
  let path = route.path.split('/')
  return `/${path[1]}/${path[2]}`
})

//点击导航
const actMenuItem = (item) => {
  router.push({ path: item.index })
  menuStore.changeTabs({ index: item.index, name: item.name })
}

const menus = ref([])
const autherMenu = () => {
  const { yuangong, shangpin, dingdan, jinqian, huiyuan, shezhi, tongji } = userStore.userInfo
  const authMenuOne = ['员工管理', '商品']
  menus.value = menuStore.menus
  if (yuangong == '0') {
    menus.value = menus.value.filter((v) => v.name != '员工管理')
  }

  if (shangpin == '0') {
    menus.value = menus.value.filter((v) => v.name != '商品')
  }

  if (dingdan == '0') {
    menus.value = menus.value.filter((v) => v.name != '订单管理')
  }

  if (jinqian == '0') {
    menus.value = menus.value.filter((v) => v.name != '金钱管理')
  }

  if (huiyuan == '0') {
    menus.value = menus.value.filter((v) => v.name != '会员管理')
  }

  if (shezhi == '0') {
    menus.value = menus.value.filter((v) => v.name != '设置')
  }

  if (tongji == '0') {
    menus.value = menus.value.filter((v) => v.name != '统计')
  }
}

watch(
  () => userStore.userInfo,
  (newV) => {
    if (newV) {
      autherMenu()
    }
  },
  { immediate: true, deep: true }
)

onMounted(() => { })
</script>
<style lang="scss" scoped>
.slider-com {
  position: fixed;
  left: 0;
  top: 0px;
  width: 200px;
  height: 100vh;
  background-color: #21212b;
  color: #fff;
  overflow-y: auto;
  transition: width 0.5s;
  padding-top: 0px;
  background: #3c4145;

  :deep(.el-menu.el-menu-slider) {
    --el-menu-bg-color: #3c4145;
    --el-menu-hover-bg-color: #3c4145;
    --el-menu-active-color: #fff;
    --el-menu-text-color: #fff;
    --el-menu-hover-text-color: #fff;
    border-right: 0;

    .el-menu.el-menu--inline {
      --el-menu-bg-color: #17181c;
      --el-menu-hover-bg-color: #009788;
      --el-menu-active-color: #fff;
      --el-menu-text-color: #fff;
      --el-menu-hover-text-color: #fff;

      .el-menu-item.is-active {
        background-color: #009788;
      }
    }

    .el-menu-item.is-active {
      background-color: #009788;
    }

    .el-menu-item-group__title {
      padding: 0;
    }
  }
}

.slider-com.expand {
  width: 63px;
}
</style>
